<template>
    <div class="boxContentCss">
        <el-form ref="formRef" :model="form" label-position="right" label-width="auto">
            <EdCreateCard :title="data.isUpdate ? '编辑公告通知':'添加公告通知'">
                <template #back>
                    <div class="createBack" @click="$utilsSet.goBack($router)"><svg-icon icon-class="back" /> 返回</div>
                </template>
                <div class="zh_flex">
                    <el-row :gutter="20" class="mainBackgroundColor marginLeft0Right0 border-radius-bottom width-100">
                        <el-col :span="6">
                            <el-form-item label="公告类型" prop="noticeType" :rules="validate.validates({required:true,msg:'请选择公告类型'})">
                                <EdSelect  :selectParams="data.selectNoticeTypeParams" v-model="form.noticeType"></EdSelect>
                            </el-form-item>
                        </el-col>
                        <el-col :span="14">
                            <el-form-item label="公告标题" prop="title" :rules="validate.validates({required:true,msg:'请输入公告标题'})">
                                <el-input v-model="form.title" placeholder="请输入"  maxlength="50"></el-input> 
                            </el-form-item>
                        </el-col>
                        <el-col :span="20">
                            <el-form-item label="公告内容" prop="detail" :rules="validate.validates({required:true,msg:'请输入公告内容'})">
                                <EdTinymce ref="EdTinymceRef" v-model="form.detail"></EdTinymce>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="创建者" prop="creator" :rules="validate.validates({required:true,msg:'请输入创建者'})">
                                <el-input v-model="form.creator" maxlength="20"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="14">
                            <el-form-item label="发布对象" prop="rooms" :rules="validate.validates({required:true,msg:'请选择发送对象'})">
                                <EdLazyCascader ref="edLazyCascader" checkStrictly="true" placeholder="小区/分期/楼栋" leafLevel="2" @emit-cascader-value="emitCascaderValue"></EdLazyCascader>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item class="form_btns">
                                <el-button class="ed-button ed_black-bottom" @click="onSubmit()" :loading="data.disabled">确定</el-button>
                                <el-button class="ed-button ed_white_bottom" @click="$utilsSet.goBack($router)">取消</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </EdCreateCard>
        </el-form>
    </div>
</template>
<script setup>
    import EdTinymce from 'src/components/EdTinymce.vue'
    import EdSelect from 'src/components/EdSelect.vue'
    import EdCreateCard from 'src/components/EdCreateCard.vue'
    import {addNotice, detailNotice, editNotice} from "./api";
    import { getDictByCode } from "src/api/dictionaries";
    import EdLazyCascader from 'src/components/EdLazyCascader.vue'
    import message from 'src/utils/once-message'
    import router from 'src/router'
    import { onActivated, onDeactivated, reactive, ref } from 'vue';
    import store from 'src/store/index'
    import * as validate from "src/utils/validate"
    const form = reactive({
        noticeType: '',
        title: '',
        detail: '',
        creator: '',
        villageId: '',
        stagesId: '',
        buildingId: '',
        rooms: []
    })
    const data = reactive({
        isUpdate:false,
        disabled: false,
        selectNoticeTypeParams:{
            options:[],
            placeholder:"请选择公告类型"
        }
    })
    onActivated(()=>{
        getDictByCode('announcement_notice_type').then(res=>{
            data.selectNoticeTypeParams.options = res.data.items;
        })
        if(router.currentRoute.query.id){
            data.isUpdate = true;
            getDetailNotice()
        }else {
            form.creator = store.getters.name;
            data.isUpdate = false;
        }
    })
    const EdTinymceRef = ref()
    const edLazyCascader = ref()
    const formRef = ref()
    onDeactivated(()=>{
        Object.assign(form, {
            noticeType: '',
            title: '',
            detail: '',
            creator: '',
            villageId: '',
            stagesId: '',
            buildingId: '',
            rooms: [],
        })
        // 清空editor的缓存
        EdTinymceRef.value.$children[0].cache = '';
        edLazyCascader.value.reset()
        data.disabled = false;
        formRef.value.resetFields()
    })
    function getDetailNotice(){
        detailNotice({id:router.currentRoute.query.id}).then(response => {
            if(response.code == 20000) {
                Object.assign(form, {
                    id: response.data.id,
                    noticeType: response.data.noticeType.toString(),
                    title: response.data.title,
                    detail: response.data.detail,
                    creator: response.data.creator,
                    villageId: response.data.villageId,
                    stagesId: response.data.stagesId,
                    buildingId: response.data.buildingId,
                    rooms: {
                        village: response.data.villageId||[],
                        stages: response.data.stagesId||[],
                        building: response.data.buildingId||[],
                    }
                })
                let arr = [];
                if(response.data.villageId.length) {
                    arr.push(response.data.villageId[0]&&response.data.villageId[0].toString());
                    if(response.data.stagesId.length){
                        arr.push(response.data.stagesId[0]&&response.data.stagesId[0].toString());
                        if(response.data.buildingId.length){
                            arr.push(response.data.buildingId[0]&&response.data.buildingId[0].toString());
                        }
                    }
                }
                let length = arr.length;
                if(length) edLazyCascader.value.setVal(arr); 
                // 只传最后一个id
                form.villageId = length == 1 ? arr[length-1] : ''
                form.stagesId = length == 2 ? arr[length-1] : ''
                form.buildingId = length == 3 ? arr[length-1] : ''
            }
        })
    }
    function onSubmit(){
        // 去空格
        form['title']=form['title'].trim();
        form['creator']=form['creator'].trim();
        formRef.value.validate((valid) => {
            if (valid) {
                data.disabled = true;
                let urlFn = data.isUpdate ? editNotice : addNotice;
                delete form.rooms;
                urlFn(form).then(response => {
                    if(response.code == 20000) {
                        data.disabled = false;
                        message.success({
                            message: '保存成功',
                            center: true,
                            duration: 2000,
                        })
                        window.setTimeout(() => {
                            router.back()
                        }, 600)
                        form['detail'] = ''
                    }else {
                        data.disabled = false
                    }
                }).catch(()=>{
                    data.disabled = false
                })
            }
        })
    }
    function emitCascaderValue(data){
        let length = data&&data.length;
        let obj = {
            villageId: length == 1 ? data[length-1] : '',
            stagesId: length == 2 ? data[length-1] : '',
            buildingId: length == 3 ? data[length-1] : '',
        }
        Object.assign(form, obj)
        form.rooms = data;
    }
</script>
<style lang="scss" scoped>
    :deep .el-form-item{
        .el-select{ width: 100% !important; }
        .el-cascader{ width: 100% !important;}
    }
    .form_btns{
        display: flex;
        margin-right: 10px;
        margin-top: 10px;
    }
</style>